<template>
  <div>
    <cus-modal
      ref="modal"
      :title="`${form.dishName}`"
      :width="884"
      :closable="false"
      @on-visible-change="onVisibleChange"
    >
      <Tabs type="card">
        <TabPane label="菜肴配料">
          <div style="margin-top:-20px" class="tabsBox">
            <div
              style="display:flex;padding-top:15px;justify-content: space-between;width:100%"
            >
              <div class="tab1-left">
                <div class="tab1-left-title">菜肴</div>
                <div class="tab1-left-bottom">
                  <div class="tab1-left-bottom-line">
                    菜肴编码: {{ showForm.dishCode }}
                  </div>
                  <div class="tab1-left-bottom-line">
                    菜肴名称: {{ showForm.dishName }}
                  </div>
                  <div class="tab1-left-bottom-line">
                    菜肴分类: {{ showForm.dishType }}
                  </div>
                  <div class="tab1-left-bottom-line">
                    烹调类型: {{ showForm.cookingType }}
                  </div>
                </div>
                <div
                  class="tab1-left-title"
                  style="border-top: 1px solid #CCCCCC;"
                >
                  {{ `食材(${foodCount}个)/100人份` }}
                </div>
                <div class="tab1-left-bottom" v-if="showForm.aiChineseBomFoods">
                  <div
                    class="tab1-left-bottom-line"
                    v-for="(item, index) in showForm.aiChineseBomFoods"
                    :key="index"
                  >
                    {{ item.materialName }} {{ item.weight
                    }}{{ item.specification }}
                  </div>
                </div>
              </div>
              <div class="tab1-right" style="margin-left:-1px">
                <div class="tab1-right-left">
                  <div class="tab1-right-left-title">营养分析/人均</div>
                  <div class="tab1-right-left-content">
                    <div class="tab1-right-left-content-line">
                      碳水化合物： {{ showForm.sugar }} 克
                    </div>
                    <div class="tab1-right-left-content-line">
                      脂肪： {{ showForm.fat }} 克
                    </div>
                    <div class="tab1-right-left-content-line">
                      蛋白质： {{ showForm.protein }} 克
                    </div>
                    <div class="tab1-right-left-content-line">
                      总热量： {{ showForm.energy }} 千卡
                    </div>
                  </div>
                </div>
                <div class="tab1-right-right">
                  <div class="tab1-right-right-title">
                    {{ showForm.dishName }}营养素产热比
                  </div>
                  <div>
                    <piechart
                      :nutrition="showForm.nutritiondouble"
                      ref="piechart"
                    ></piechart>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </TabPane>
        <TabPane label="菜肴图片">
          <div
            class="imgBox"
            style="width: 500px; height: 300px; margin: 0 auto;"
          >
            <img
              :src="showForm.cookPicture"
              alt=""
              style="width: 500px; height: 300px"
            />
          </div>
        </TabPane>
        <TabPane label="菜肴视频">
          <div
            style=" width:500px!important;height:340px!important; margin: 0 auto;"
          >
            <video
              :src="showForm.cookVideo"
              controls="controls"
              id="mealVideo"
              name="media"
              style="width:500px!important;height:350px!important;"
            ></video>
          </div>
        </TabPane>
        <TabPane label="烹饪方法">
          <div class="craftBox">
            <div class="craftBox-make">
              <div class="craftBox-title">制作工艺</div>
              <div class="craftBox-content">{{ showForm.cookCraft }}</div>
            </div>
            <div class="craftBox-cooking">
              <div class="craftBox-title">烹饪工艺</div>
              <div class="craftBox-content">{{ showForm.craft }}</div>
            </div>
          </div>
        </TabPane>
      </Tabs>

      <Spin size="large" fix v-if="loading"> </Spin>
      <div slot="footer">
        <slot name="footer">
          <div class="modal-footer">
            <cus-button size="small" class="mr_2" @onClick="onCancel"
              >关闭</cus-button
            >
          </div>
        </slot>
      </div>
    </cus-modal>
  </div>
</template>

<script>
import { selectDishDtl } from "@/api/business/dishesModule";
import piechart from "./piechart";

const form = {
  dishCode: "",
  dishName: ""
};

export default {
  components: { piechart },
  name: "dishesTags",
  data() {
    return {
      loading: false,
      form: form,
      showForm: {},
      src: "http://172.16.1.75:11570/statics/video/米饭.mp4",
      foodCount: 0
    };
  },

  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.form = this.$cu.deepClone(form);
      }
    },
    show(row) {
      this.selectDishDtlApi();
      this.$refs["modal"].show = true;
    },
    //模态框确认
    onOk() {
      this.onCancel();
    },
    //模态框取消
    onCancel() {
      this.$refs["modal"].show = false;
    },
    // 获取营养信息 --- 接口
    selectDishDtlApi() {
      this.loading = true;
      return new Promise(resolve => {
        selectDishDtl({
          dishCode: this.form.dishCode
        }).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            console.log(1234,res);
            res.data.nutritiondouble = [
              {
                value: res.data.nutritiondouble
                  ? res.data.nutritiondouble[0]
                  : 333,
                name: "蛋白质"
              },
              {
                value: res.data.nutritiondouble
                  ? res.data.nutritiondouble[1]
                  : 333,
                name: "脂肪"
              },
              {
                value: res.data.nutritiondouble
                  ? res.data.nutritiondouble[2]
                  : 333,
                name: "碳水化合物"
              }
            ];
            this.showForm = res.data;
            this.foodCount = res.data.aiChineseBomFoods
              ? res.data.aiChineseBomFoods.length
              : 0;
             
              this.$refs["piechart"].myChart(this.showForm.nutritiondouble);
          
          
            //     console.log(piechart);
      
            resolve();
          }
        });
      });
    }
  }
};
</script>
<style scoped lang="less">
.tab1-left {
  width: 248px;
  min-height: 314px;
  border: 1px solid #cccccc;
  margin-right: 24rpx;

  &-title {
    height: 37px;
    border-bottom: 1px solid #cccccc;
    line-height: 37px;
    padding-left: 16px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
  }

  &-bottom {
    padding: 8px 16px;

    &-line {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
      margin-bottom: 8px;
    }
  }
}

.tab1-right {
  // flex: 1;
  width: 615px;
  min-height: 314px;
  display: flex;

  &-left {
    width: 260px;
    // height: 314px;
    border: 1px solid #cccccc;

    &-title {
      height: 37px;
      border-bottom: 1px solid #cccccc;
      line-height: 37px;
      padding-left: 16px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
    }

    &-content {
      height: 238px !important;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 8px 16px;

      &-line {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        margin-bottom: 8px;
      }
    }
  }

  &-right {
    width: 355px;
    min-height: 314px;
    border: 1px solid #cccccc;
    border-left: none;

    &-title {
      height: 37px;
      border-bottom: 1px solid #cccccc;
      line-height: 37px;
      padding-left: 16px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
    }
  }
}

.craftBox {
  display: flex;

  &-title {
    margin-left: 20px;
    font-size: 18px;
    font-weight: bold;
  }

  &-make {
    flex: 1;
  }
  &-content {
    margin-top: 30px;
    width: 80%;
  }

  &-cooking {
    flex: 1;
  }
}
</style>
